<script setup>
import CustomNavbar from '@/components/custom-navbar.vue'
import SokachSwiper from '@/components/sokach-swiper.vue'
import SokachCategory from '@/components/Sokach-category.vue'
import SokachHome from '@/components/sokach-home.vue'
import SokachGuess from '@/components/sokach-guess.vue'
import SokachSkeleton from '@/components/sokach-skeleton.vue'
import {
  getHomeBannerAPI,
  getHomeCategoryAPI,
  getHomeHotAPI,
  getHomeGoodsGuessLikeAPI,
} from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 获取轮播图数据
const bannerList = ref([])
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}

// 获取分类数据
const categoryList = ref([])
const getHomeCategoryData = async () => {
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}

//获取推门推荐数据
const homeHotList = ref([])
const getHomeHotData = async () => {
  const res = await getHomeHotAPI()
  homeHotList.value = res.result
}

//获取猜你喜欢数据
const pageParams = ref({ page: 1, pageSize: 10 }) //页码
const resPages = ref(0) //总页码
const homeGoodsGuessLikeList = ref([])
const getHomeGoodsGuessLikeData = async () => {
  const res = await getHomeGoodsGuessLikeAPI(pageParams.value)
  homeGoodsGuessLikeList.value = [...homeGoodsGuessLikeList.value, ...res.result.items]
  resPages.value = res.result.pages
}

//重置猜你喜欢数据
const resetData = () => {
  pageParams.value.page = 1
  homeGoodsGuessLikeList.value = []
}

//标记数据结束 trur表示数据已全部完成加载
const finish = ref(false)

//上拉事件
const onScrolltolower = () => {
  //先进行数据判断是否全部数据已加载完成
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '已没有更多数据' })
  }

  //分页添加条件
  if (pageParams.value.page < resPages.value) {
    //页码+1
    pageParams.value.page++

    //请求数据
    getHomeGoodsGuessLikeData()
  } else {
    finish.value = true
    console.log('没有数据了')
  }
}

//下拉刷新状态
const isTriggered = ref(false)

//下拉刷新事件
const onRefresherrefresh = async () => {
  //开启状态
  isTriggered.value = true

  //重置猜你喜欢的数据
  resetData()

  //重新获取数据
  await Promise.all([
    getHomeBannerData(),
    getHomeCategoryData(),
    getHomeHotData(),
    getHomeGoodsGuessLikeData(),
  ])

  //关闭状态
  isTriggered.value = false
}

// 页面加载
//加载中标记
const isLoading = ref(false)

onLoad(async () => {
  isLoading.value = true

  await Promise.all([
    getHomeBannerData(),
    getHomeCategoryData(),
    getHomeHotData(),
    getHomeGoodsGuessLikeData(),
  ])

  isLoading.value = false
})
</script>

<template>
  <!-- 自定义导航条 -->
  <CustomNavbar></CustomNavbar>

  <!-- 滚动容器 -->
  <scroll-view
    enable-back-to-top
    refresher-enabled
    class="scroll-view"
    scroll-y
    @scrolltolower="onScrolltolower"
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
  >
    <!-- 骨架屏 -->
    <SokachSkeleton v-if="isLoading"></SokachSkeleton>
    <template v-else>
      <!-- 自定义轮播图 -->
      <SokachSwiper :list="bannerList"></SokachSwiper>
      <!-- 分类 -->
      <SokachCategory :list="categoryList"></SokachCategory>
      <!-- 热门推荐 -->
      <SokachHome :list="homeHotList"></SokachHome>
      <!-- 猜你喜欢 -->
      <SokachGuess :list="homeGoodsGuessLikeList" :finish="finish"></SokachGuess>
    </template>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}
</style>
